import 'package:flutter/material.dart';
import 'package:fsharing/ui/pages/cart/cart_page.dart';
import 'package:fsharing/ui/pages/home/home_page.dart';
import 'package:fsharing/ui/pages/message/message_page.dart';
import 'package:fsharing/ui/pages/mine/mine_page.dart';
import 'package:fsharing/ui/pages/store/store_page.dart';
import 'package:fsharing/ui/widgets/background_container.dart';

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final List<Widget> _pages = [
    HomePage(),
    StoreTabItemPage(),
    MessagePage(),
    CartTabItemPage(),
    MinePage(),
  ];

  PageController _pageController;
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BackgroundContainer(
      child: Scaffold(
        body: PageView.builder(
          controller: _pageController,
          physics: NeverScrollableScrollPhysics(),
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          itemBuilder: (context, index) {
            return _pages[index];
          },
        ),
        bottomNavigationBar: SafeArea(
          child: _BottomBarWidget(
            selectedIndex: _selectedIndex,
            function: (index) => _pageController.jumpToPage(index),
          ),
        ),
      ),
    );
  }
}

class _BottomBarWidget extends StatelessWidget {
  final int selectedIndex;
  final Function(int index) function;

  _BottomBarWidget({
    Key key,
    this.selectedIndex,
    this.function,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xFF3C3E4A), Color(0xFF2C2C33)],
        ),
      ),
      height: 52,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Expanded(
            child: _BottomItemWidget(
              name: 'assets/images/main/ic_home.png',
              selected: selectedIndex == 0,
              function: () => function(0),
            ),
          ),
          Expanded(
            child: _BottomItemWidget(
              name: 'assets/images/main/ic_store.png',
              selected: selectedIndex == 1,
              function: () => function(1),
            ),
          ),
          Expanded(
            child: _BottomItemWidget(
              name: 'assets/images/main/ic_chat.png',
              selected: selectedIndex == 2,
              function: () => function(2),
            ),
          ),
          Expanded(
            child: _BottomItemWidget(
              name: 'assets/images/main/ic_cart.png',
              selected: selectedIndex == 3,
              function: () => function(3),
            ),
          ),
          Expanded(
            child: _BottomItemWidget(
              name: 'assets/images/main/ic_mine.png',
              selected: selectedIndex == 4,
              function: () => function(4),
            ),
          ),
        ],
      ),
    );
  }
}

class _BottomItemWidget extends StatelessWidget {
  final String name;
  final bool selected;
  final Function function;

  _BottomItemWidget({
    Key key,
    @required this.name,
    @required this.selected,
    @required this.function,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        decoration: BoxDecoration(
          color: selected ? Theme.of(context).accentColor : Colors.transparent,
          boxShadow: [
            BoxShadow(color: Colors.black12, blurRadius: 20, offset: Offset(0, -25)),
          ],
        ),
        width: 75,
        child: Center(
          child: Image.asset(name, height: 33, color: Colors.white),
        ),
      ),
      onTap: function,
    );
  }
}
